<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
    <link rel="apple-touch-icon" href="favicon.png">
    <link rel="Shortcut Icon" href="favicon.png" type="image/x-icon">
    <title>农场</title>
    <style type="text/css">

        div {
            width: 10rem;
            height: 18rem;
            position: fixed;
            /*height: 300px;*/
            background: url('images/background.png') no-repeat;
            background-size: 100% auto;
        }
        .farm-title{
            font-size: 0.45rem;
            color: white;
            position: absolute;
            left: 4.16rem;
            top: 1.08rem;
            width: 1.88rem;
            height: 0.45rem;
        }
        #gift{
            position: absolute;
            left: 0.52rem;
            top: 2.04rem;
            background: url('images/gift.png') no-repeat;
            width: 1.03rem;
            height: 1.03rem;
            background-size: 100% auto;
        }
        #chick-round{
            position: absolute;
            left: 0.52rem;
            top: 3.41rem;
            background: url('images/chick_round.png') no-repeat;
            width: 1.03rem;
            height: 1.03rem;
            background-size: 100% auto;
        }
        #remark{
            position: absolute;
            left: 0.53rem;
            top: 4.76rem;
            background: url('images/remark.png') no-repeat;
            width: 1.08rem;
            height: 1.08rem;
            background-size: 100% auto;
        }
        #wheel{
            position: absolute;
            left: 3.12rem;
            top: 6.68rem;
            background: url('images/wheel.png') no-repeat;
            width: 2.01rem;
            height: 2.01rem;
            background-size: 100% auto;
        }
        #chick{
            position: absolute;
            left: 3.29rem;
            top: 9.71rem;
            background: url('images/chick.png') no-repeat;
            width: 3.43rem;
            height: 4.77rem;
            background-size: 100% auto;
        }
        #rice{
            position: absolute;
            left: 6.83rem;
            top: 13.19rem;
            background: url('images/rice.png') no-repeat;
            width: 1.72rem;
            height: 1.48rem;
            background-size: 100% auto;
        }
        #bee-left{
            position: absolute;
            left: 0.57rem;
            top: 10.53rem;
            background: url('images/bee.png') no-repeat;
            width: 0.29rem;
            height: 0.25rem;
            background-size: 100% auto;
        }
        #bee-right{
            position: absolute;
            left: 1.51rem;
            top: 10.04rem;
            background: url('images/bee.png') no-repeat;
            width: 0.32rem;
            height: 0.27rem;
            background-size: 100% auto;
        }
        #food{
            position: absolute;
            left: 7.57rem;
            top: 15.21rem;
            background: url('images/food.png') no-repeat;
            width: 1.47rem;
            height: 1.47rem;
            background-size: 100% auto;
        }


        /*动画部分*/
        @-webkit-keyframes rotation {
            from {
                -webkit-transform: rotate(0deg);
            }
            to {
                 -webkit-transform: rotate(360deg);
            }
        }
        #wheel{
            -webkit-transform: rotate(360deg);
            animation: rotation 8s linear infinite;
            -webkit-animation: rotation 8s linear infinite;
        }
        @-webkit-keyframes fly1 {
            0%   { left:0.57rem; top:10.53rem;}
            25%  {left:0.59rem; top:10.3rem;}
            50%  { left:0.61rem; top:10.2rem;}
            75%  { left:0.5rem; top:10.4rem;}
            100% { left:0.57rem; top:10.53rem;}
        }

        #bee-left{
            animation: fly1 2s linear infinite;
            -webkit-animation: fly1 2s linear infinite;
        }

        .flip-horizontal {
             -webkit-transform: scaleX(-1);
             transform: scaleX(-1);
        }
        @-webkit-keyframes fly2 {
            0%   { left:1.51rem; top:10.04rem;}
            25%  { left:1.45rem; top:10.14rem;}
            50%  { left:1.47rem; top:10.24rem;}
            75%  { left:1.43rem; top:10.15rem;}
            100% { left:1.51rem; top:10.04rem;}
        }

        #bee-right{
            animation: fly2 3s linear infinite;
            -webkit-animation: fly2 3s linear infinite;
        }
    </style>
</head>
<body>
<!-- 页面结构写在这里 -->
<div>
    <p class="farm-title">我的农场</p>
    <div id="gift"></div>
    <div id="chick-round"></div>
    <div id="remark"></div>
    <div id="wheel"></div>
    <div id="chick"></div>
    <div id="rice"></div>
    <div id="bee-left"></div>
    <div id="bee-right" class="flip-horizontal"></div>
    <div id="food"></div>
    <!--<img id="gift" src="images/gift.png">-->
    <!--<img id="chick-round" src="images/chick_round.png">-->
    <!--<img id="wheel" src="images/wheel.png">-->
    <!--<img id="chick" src="images/chick.png">-->
    <!--<img id="rice" src="images/rice.png">-->
    <!--<img id="bee-left" src="images/bee.png">-->
    <!--<img id="bee-right" class="flip-horizontal" src="images/bee.png">-->
    <!--<img id="food" src="images/food.png">-->
</div>
</body>
</html>
